
<include file="public/header"/>
<style type="text/css">
    ul{
        margin-bottom: 0px;
    }
</style>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.2/weui.min.css">

<div id="container" class="container">

    <div class="register"  >
    <form id="add_wxmessage" method="post" onSubmit="return validate_comment()">

        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">图片（选填，提供问题截图）</div>
                            <div class="weui_cell_ft"><span id="imageCounter">0</span>/9</div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id="files"></ul>
                            <div class="weui_uploader_input_wrp" id="file_uploader">
                                <input class="weui_uploader_input" type="file" id="file"
                                       name="file" accept="image/jpg,image/jpeg,image/png,image/gif">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="weui_cells_tips images_info"></p>

        <p class="weui_cells_tips "><i class="glyphicon glyphicon-map-marker"></i>
            <span class="wx_cmgd_location"></span>
            <input value='' type='hidden' name='address' id="address">
        </p>


        <div class="weui_btn_area">
            <input name="" type="submit" value="提交信息" class="weui_btn weui_btn_primary js_btn" />
        </div>
    </form>
</div>
</div>

<include file="public/footer"/>




<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">






    //图片上传

    $(function() {
        var objUrl;
        var img_html;
        $("#file").change(function() {
            var count = $('#imageCounter').html();
            console.log(count);
            if(count>=9){
                alert('最多上传9张图片');
                return false;
            }

            var files = $("#files");
            var filepath = $("input[name='file']").val();
            for(var i = 0; i < this.files.length; i++) {
                objUrl = getObjectURL(this.files[i]);

                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();
                /*
                 作者：z@qq.com
                 时间：2016-12-10
                 描述：鉴定每个图片上传尾椎限制
                 * */
                if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
                    $(".shade").fadeIn(500);
                    $(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
                    this.value = "";
                    $("#files").html("");
                    return false;
                } else {

                    var d = new Date();
                    var str = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();

                    var imgName =str+'\/'+(new Date()).valueOf() + ext;

                     upload(filepath,imgName,this.files[i]);

                    img_html = "<input type = 'hidden' value='" + imgName+ "' name='imageName[]' ><li class='weui_uploader_file' style='background-image: url(" + objUrl + ")'><button class='removeBtn' rel='"+ imgName +"' onclick='javascript:removeImg(this)'>X</button></li>";
//                    img_html += "  ";
                    files.append(img_html);
                }
            }

            var imageCounter = $(".removeBtn").size()?$(".removeBtn").size():0;
            $("#imageCounter").text(imageCounter);


            /*
             作者：z@qq.com
             时间：2016-12-10
             描述：鉴定每个图片大小总和
             * */
            var file_size = 0;
            var all_size = 0;
            for(j = 0; j < this.files.length; j++) {
                file_size = this.files[j].size;
                all_size = all_size + this.files[j].size;
                var size = all_size / 1024;
                if(size > 2000) {
                    $(".shade").fadeIn(2000);
                    $(".images_info").text(size+"上传的图片大小不能超过1M！");
                    this.value = "";
//                   $("#files").html("");
                    return false;
                }
            }

            return true;
        });
        /*
         作者：z@qq.com
         时间：2016-12-10
         描述：鉴定每个浏览器上传图片url 目前没有合并到Ie
         * */
        function getObjectURL(file) {
            var url = null;
            if(window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if(window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if(window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }


    });
    /*
     作者：z@qq.com
     时间：2016-12-10
     描述：上传图片附带删除 再次地方可以加上一个ajax进行提交到后台进行删除
     * */
    function removeImg(r){
//
        var imgName = $(r).attr("rel");
        remove(imgName);
//        console.log(imgName);
        $(r).parent().remove();
    }
    /*
     作者：z@qq.com
     时间：2016-12-10
     描述：上传图片附带放大查看处理
     * */
    function lookBigImg(b){
        $(".shadeImg").fadeIn(500);
        $(".showImg").attr("src",$(b).attr("src"))
    }
    /*
     作者：z@qq.com
     时间：2016-12-10
     描述：关闭弹出层
     * */
    function closeShade(){
        $(".shade").fadeOut(500);
    }
    /*
     作者：z@qq.com
     时间：2016-12-10
     描述：关闭弹出层
     * */
    function closeShadeImg(){
        $(".shadeImg").fadeOut(500);
    }


    function readFile(file){
//        var files = document.getElementById("files");

//        var file = this.files[0];


        if(!/image\/\w+/.test(file.type)){
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            var u_r = this.result;
            return u_r;
//            files.innerHTML = '<img src="'+this.result+'" alt=""/>'
        }
    }

    function upload(imgPath,imgName,file){
        var formData = new FormData();
        var name = imgPath;
        formData.append("file",file);
        formData.append("imgpath",imgName);
        $.ajax({
            url : "{:url('upload/upload')}",
            type : 'POST',
            data : formData,
            processData : false,
            contentType : false,
            success : function(responseStr) {
                $(".images_info").text('');
                return responseStr;
            },
            fail:function(fail){
                $(".images_info").text(fail);
            }
        });
    }

    function remove(imgName){
        console.log(imgName);
        var formData = new FormData();
        formData.append("imgName",imgName);
//        $.ajax({
//            url : "/mobile/user/remove_img",
//            type : 'POST',
//            data : formData,
//            processData : false,
//            contentType : false,
//            success : function(responseStr) {
//                $(".images_info").text(responseStr);
//            }
//        });
    }



</script>

